<template>
	<view class=" gui-flex gui-space-between gui-align-items-center">
		<input type="text" class="gui-form-input gui-flex1" @input="input" :disabled="verify" v-model="val" :name="name"
			placeholder="请输入手机号" />
			
		<!-- #ifdef H5 -->
		<button type="default" v-if="verify" @tap="showPopup"
			class="gui-button gui-button-mini gui-bg-blue gui-noborder"><text
				class="gui-icons gui-color-white  gui-button-text-mini gui-padding-x">获取手机号</text></button>
		<!-- #endif -->

		<!-- #ifdef MP -->
		<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
			class="gui-button gui-button-mini gui-bg-blue gui-noborder"><text
				class="gui-icons gui-color-white  gui-button-text-mini gui-padding-x">获取手机号</text></button>
		<!-- #endif -->


		<!-- #ifdef H5 -->
		<gui-modal ref="popup" :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']"
			title="绑定手机号">
			<template v-slot:content>
				<view
					class="gui-margin gui-padding gui-bg-gray gui-border-b gui-border-radius gui-flex gui-space-between gui-align-items-center">
					<input v-model="phone" type="digit" placeholder="请输入手机号" />
					
					<button type="default" @tap="getVCode()"
						class="gui-flex-shrink0 gui-button gui-button-mini gui-bg-red gui-noborder"><text
							class="gui-icons gui-color-white  gui-button-text-mini gui-padding-x">{{vcodeBtnName}}</text></button>
				</view>

				<view
					class="gui-margin gui-padding gui-bg-gray gui-border-b gui-border-radius gui-flex gui-space-between gui-align-items-center">
					<input v-model="code" type="digit" placeholder="请输入验证码" />
				</view>
			</template>

			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<template v-slot:btns>
				<view class="gui-padding">
					<button type="default" @tap="comfirm" class="gui-button-mini  gui-bg-red gui-color-white">
						确认
					</button>
				</view>
			</template>
		</gui-modal>
		<!-- #endif -->


	</view>

</template>

<script>
	export default {
		name: "hyb-phone",
		props: {
			name: {
				type: String,
				default: ""
			},
			modelValue: {
				type: String,
				default: ""
			},
			verify: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				val: '',
				phone: '',
				code: '',
				countNum: 120,
				countDownTimer: null,
				vcodeBtnName: "验证码"
			};
		},

		watch: {
			modelValue(val) {
				this.val = val;
			}
		},

		created() {
			this.val = this.modelValue
		},

		methods: {
			input(e) {
				console.log(e)

				setTimeout(() => {
					this.$emit('input', this.val)
					this.$emit('update:modelValue', this.val)
				})
			},
			showPopup() {
				this.$refs.popup.open();
			},

			getVCode: function() {
				var myreg = /^[1][0-9]{10}$/;
				if (!myreg.test(this.phone)) {
					uni.showToast({
						title: '请正确填写手机号码',
						icon: "none"
					});
					return false;
				}

				if (this.phone == this.val) {
					uni.showToast({
						title: '与原手机号一致',
						icon: "none"
					});
					return false;
				}
				// 手机号码为 :  this.phoneno
				// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
				if (this.vcodeBtnName != '验证码' && this.vcodeBtnName != '重新发送') {
					return;
				}

				uni.gPost("sms", {
					phone: this.phone
				}).then((res) => {
					this.vcodeBtnName = "发送中...";
					// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
					// 假设发送成功，给用户提示
					uni.showToast({
						title: '短信已发送，请注意查收',
						icon: "none"
					});
					// 倒计时
					this.countNum = 120;
					this.countDownTimer = setInterval(() => {
						this.countDown();
					}, 1000);
				})


			},
			countDown: function() {
				if (this.countNum < 1) {
					clearInterval(this.countDownTimer);
					this.vcodeBtnName = "重新发送";
					return;
				}
				this.countNum--;
				this.vcodeBtnName = this.countNum + '秒';
			},

			comfirm() {
				if (!this.phone) {
					uni.showToast({
						title: "请填写手机号",
						icon: "none"
					})
				} else if (!this.code) {
					uni.showToast({
						title: "请填写验证码",
						icon: "none"
					})
				} else {
					uni.gPost("phone/check", {
						phone: this.phone,
						code: this.code
					}).then((phone) => {
						uni.showToast({
							title: "验证通过",
						})
						this.val = phone;
						setTimeout(() => {
							this.$emit('input', this.val)
							this.$emit('update:modelValue', this.val)
						})
						this.$refs.popup.close();
					});
				}
			},
			getPhoneNumber(e) {
				let that = this;
				let detail = e.detail;
				uni.checkSession({
					success: () => {
						that.decrypt(detail)
					},
					fail: () => {}
				})
			},


			decrypt(detail) {
				uni.gPost("phone/decrypt", {
					encryptedData: detail.encryptedData,
					iv: detail.iv,
					session_key: uni.storage.get("session_key")
				}).then((res) => {
					console.log(res)
					this.val = res.phone;
					uni.showToast({
						title: "获取成功",
					})
					setTimeout(() => {
						this.$emit('input', this.val)
						this.$emit('update:modelValue', this.val)
					})
				})
			}
		}
	}
</script>

<style>
	.gui-button {
		padding: 0 !important;
	}
</style>
